<template>
  <div id="app">
    <Header />
    <transition :name="transitionName">
      <router-view class="position-div"></router-view>
    </transition>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
export default {
  name: 'App',
  data(){
    return{
      transitionName:''
    }
  },
  components: {
    Header
  },
  watch: {
        $route(to, from) {
          debugger
            const routeDeep = ['/', '/Component2', '/Component3'];
            const toDepth = routeDeep.indexOf(to.path);
            const fromDepth = routeDeep.indexOf(from.path);
            this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right';
        }
    },
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
ul,li{
  list-style: none;
}
.fold-left-enter-active {
 animation-name: fold-left-in;
 animation-duration: 1s;
 }
 .fold-left-leave-active {
 animation-name: fold-left-out;
 animation-duration: 1s;
 }
.fold-right-enter-active {
 animation-name: fold-right-in;
 animation-duration: 1s;
 }
 .fold-right-leave-active {
 animation-name: fold-right-out;
 animation-duration: 1s;
 }
 @keyframes fold-left-in {
 0% {
  transform: translate3d(100%, 0, 0);
 }
 100% {
  transform: translate3d(0, 0, 0);
 }
 }
 @keyframes fold-left-out {
 0% {
  transform: translate3d(0, 0, 0);
 }
 100% {
  transform: translate3d(-100%, 0, 0);
 }
 }
  @keyframes fold-right-in {
 0% {
  transform: translate3d(-100%, 0, 0);
 }
 100% {
  transform: translate3d(0, 0, 0);
 }
 }
 @keyframes fold-right-out {
 0% {
  transform: translate3d(0, 0, 0);
 }
 100% {
  transform: translate3d(100%, 0, 0);
 }
 }
 .position-div{
   position:absolute!important;
   left:0;
   right:0;
   top:0;
   bottom:0;
}
</style>
